<template>
  <!-- 热门精品 -->
  <div class="index_hot">
    <div class="hot_index">
      <div
        v-for="(item,index) in hot.imgUrls"
        :key="index"
        :class="index !== 0 ? 'nofirst' : ''"
        @click="gogo(item,index)"
      >
        <img
          :src="item.src"
          :alt="index"
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['hot'],
  data () {
    return {
    }
  },
  components: {

  },
  methods: {
    gogo (item, index) {
      // console.log(item)
    }
  },
  created () {
    this.hot.imgUrls.splice(this.hot.imgUrls.length - 1, 1)
  }
}
</script>

<style scoped>
.hot_index {
  margin: 20px;
  height: 200px;
}
.hot_index > div {
  display: inline-block;
  float: right;
  background-color: #fcc;
}
.hot_index > div > img {
  width: 100%;
  height: 100%;
}
.hot_index > div:first-of-type {
  float: left;
  width: 50%;
  height: 100%;
  background-color: #000;
}
.hot_index > .nofirst {
  height: 48%;
  width: 48%;
}
.hot_index > .nofirst:nth-of-type(3) {
  margin-top: 2%;
}
/* @import '../../assets/css/index.css' */
</style>
